<!-- <template>
	<view class="outBox">
		<u-navbar leftText="扫码点单" leftIconColor="#fff" :autoBack="true" bgColor="#242331">
			<view class="left-slot" slot="left">
				 <u-icon name="arrow-left" color="#fff"></u-icon>
				<text>扫码点单</text>
			</view>
		</u-navbar>
		<view class="content" :style="{
			marginTop:menuHeight + 'px',
			height:`calc(100vh - ${menuHeight}px)`
		}">
			<view v-if="showCamera" class="camera-box">
				<camera device-position="back" flash="auto" :style="{
					width: '100%',
					height: `calc(100vh - ${menuHeight}px)`
				}" mode="scanCode" @scancode="scancode" @error="error">
					<block>
						<image class="image" src="@/static/scan-remark.png" />
						<image class="scan-bar" src="@/static/scan-bar.png" />
					</block>
				</camera>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		getWXStatusHeight,
		getPermission
	} from '@/utils/index.js'

	export default {
		data() {
			return {
				// 胶囊的宽度
				barWidth: 0,
				barHeight: 0,
				showCamera: false,
				_scanResult: false,
			}
		},
		onLoad() {
			let obj = getWXStatusHeight()
			this.barWidth = obj.barWidth + 3
			this.menuHeight = obj.menuHeight
			this.openCamera()

		},
		methods: {
			openCamera() {
				const {
					cameraAuthorized,
					microphoneAuthorized,
					osName
				} = uni.getSystemInfoSync()


				if (!cameraAuthorized) {
					uni.showModal({
						title: '提示',
						content: '您关闭了摄像头权限，请允许微信使用摄像头权限',
						confirmText: '去设置',
						success: (res) => {
							if (res.confirm) {
								uni.openAppAuthorizeSetting()
							}
						}
					})
					return
				}
				// ios 摄像头&麦克风绑定
				if (!microphoneAuthorized && osName === 'ios') {
					uni.showModal({
						title: '提示',
						content: '您关闭了麦克风权限，请允许微信使用麦克风权限',
						confirmText: '去设置',
						success: (res) => {
							if (res.confirm) {
								uni.openAppAuthorizeSetting()
							}
						}
					})
					return
				}
				// uni.navigateTo({
				// 	url: `/pages/camera/camera?mode=${mode}`
				// })
				this.getPermission()
			},
			getPermission() {
				getPermission({
					permission: 'camera',
					permissionName: '摄像头',
					success: () => {

						this.showCamera = true
					},
					cancel: () => {
						this.back()
					}
				})
			},

			// 扫码提示音
			playMusic(code) {
				const innerAudioContext = wx.createInnerAudioContext()
				innerAudioContext.autoplay = true
				innerAudioContext.src = '/static/scan-video.mp3'

				innerAudioContext.onPlay(() => {
					this.getnav("/pages/order/list?id=" + code)
				})
				innerAudioContext.onError(() => {
					this.$toast("二维码异常")
				})
			},


			// 扫码结果
			scancode(e) {
				this.playMusic(e.detail.result)
			},

			back() {
				uni.navigateBack()
			},

			error(e) {
				console.error('相机初始化失败', e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		box-sizing: border-box;
	}

	.left-slot {
		color: #fff;

		image {
			width: 40rpx;
			margin-right: 30rpx;
		}
	}

	.outBox {
		background-color: #242331;
	}

	.camera-box {
		width: 100%;
		height: 100vh;
		text-align: center;
		color: white;
		position: fixed;

		.close-btn {
			position: fixed;
			width: 50rpx;
			height: 50rpx;
			left: 30rpx;
			z-index: 999;
		}

		.image {
			width: 100%;
			height: 100vh;
			z-index: 1;
		}

		.scan-bar {
			position: absolute;
			left: 50%;
			top: 23vh;
			width: 428rpx;
			height: 12rpx;
			transform: translateX(-50%);
			z-index: 1;
			animation: scan 1.6s linear infinite;
		}

		.btn-group {
			width: 100%;
			z-index: 999;
			position: fixed;
			bottom: 100rpx;

			.take-photos {
				font-size: 24rpx;
				font-weight: 400;

				&_img {
					width: 120rpx;
					height: 120rpx;
					margin-bottom: 30rpx;
				}
			}

			.album {
				position: absolute;
				bottom: 0rpx;
				right: 100rpx;
				font-size: 24rpx;
				font-weight: 400;

				&_img {
					width: 88rpx;
					height: 88rpx;
					margin-bottom: 30rpx;
				}
			}

			&.check-box {
				padding: 0 110rpx;
				box-sizing: border-box;

				.icon {
					width: 70rpx;
					height: 70rpx;
				}
			}
		}

		.flex_center {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.flex_between {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		@keyframes scan {
			0% {
				top: 23vh;
				opacity: 0;
			}

			15% {
				opacity: 1;
			}

			90% {
				opacity: 1;
			}

			100% {
				top: 55.5vh;
				opacity: 0;
			}
		}
	}
</style -->>
